/* eslint-disable react/prop-types */
import React, { memo, useRef } from 'react'
import styles from '../index.module.scss'

const PreviewDirection = (props) => {
    const { previewDirection, setPreviewDirection } = props

    console.log(previewDirection);

    const verticalRef = useRef(null)
    const transverseRef = useRef(null)

    return (
        <div className={styles['preview_direction_wrap']}>
            <div className={styles['txt']}>排版</div>
            <div className={styles['checkbox_wrap']}>
                <div className={styles['input_wrap']}>

                    <label htmlFor='vertical' onClick={() => setPreviewDirection(1)} ref={verticalRef}>
                        <input
                            type='checkbox'
                            name=''
                            value='vertical'
                            className={styles['checkbox']}
                            id='vertical'
                            checked={previewDirection === 1 && true}
                        // onClick={() => verticalRef.current && verticalRef.current.click()}
                        />竖向排版</label>
                </div>
                <div className={styles['input_wrap']}>

                    <label htmlFor='transverse' onClick={() => setPreviewDirection(2)} ref={transverseRef}>
                        <input
                            type='checkbox'
                            name=''
                            value='transverse'
                            className={styles['checkbox']}
                            id='transverse'
                            checked={previewDirection === 2 && true}
                        // onClick={() => transverseRef.current && transverseRef.current?.click()}
                        />横向排版
                    </label>
                </div>
            </div>
        </div>
    )
}

export default memo(PreviewDirection)